<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
  mounted fo:<input v-fo><br>
  mounted created fp:<input v-fp>
</div>

<script>
  const app = {
    data(){
      return {

      }
    },
    directives:{
      fo:{
        mounted(){
          console.log("1 fo mounted")
        },
        created(){
          console.log("5 fo created",)
        },
        beforeMount(){
          console.log("6 fo beforeMount",)
        },
      },
      fp:{
        mounted(e){
          console.log("2 fp mounted, e:",e)
          e.focus()
        },
        created(){
          console.log("3 fp created",)
        },
        beforeMount(){
          console.log("4 fp beforeMount",)
        }
      }
    }
  }
  Vue.createApp(app).mount("#app")
</script>
</body>
</html>
